<template>
	<view style="width: 100%;height: 100vh;position: relative;overflow: hidden;">
		<image src="../static/background2.jpg" style="height: 100vh;width: 100%;position: absolute;left: 0%;top: 0%;">
		</image>
		<view class='container bg-gray'>
			<tn-nav-bar bgClass="bg-gradual-blue2">
				<view>
					V--3ET8888(演示版)
				</view>
			</tn-nav-bar>
			<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
				<view class="flex align-center padding-right-xs justify-end">
					<image src="/static/img/ble/ble_logo.png" style="width: 25px;height: 25px;">
					</image>
					<text class="padding-left-sm text-bold text-xl margin-right" style="color: #0081ff;">蓝牙已连接</text>
				</view>
				<view class="padding-sm padding-bottom-xs flex justify-between">
					<view class="flex">
						<acqui-dynamic-message :messageList="PackInfo['Protect'].tValue"
							ref="dynamicMessage"></acqui-dynamic-message>
					</view>

					<view class="flex align-center">
						<text class="margin-right cuIcon-clothes tn-text-xxl" style="color: #0081ff;" @click="setImg" />
					</view>
				</view>
				<view class="margin-sm tn-flex tn-flex-row-center"
					style="align-items: center;flex-direction: column;margin-bottom: 0;">
					<view style="justify-content: center;">
						<image class="tn-flex-row-center" :src="carImgs[imgNum]" style="width: 240px;height: 168px;"
							@click="showPasswordFun('CONFIG')"></image>
					</view>
					<view class="tn-margin"
						style="height: 325px;width: 100%;margin-top: -80px;border-radius: 30rpx; background-color: rgb(255 255 255 / 70%);">
						<view class="tn-flex" style="margin-top: 80px;width: 100%;height: 140px;">
							<view class="tn-flex-basic-md tn-margin b-card tn-margin-right-xs">
								<view
									class="tn-flex tn-flex-row-between tn-flex-col-bottom tn-text-bold text-xxl text-black tn-margin-sm">
									<text class="">89 %</text>
									<text class="text-gray text-lg" style="letter-spacing: 1px">剩余电量</text>
								</view>
								<zuBattery :battery="89" height='80rpx' width="260rpx">
								</zuBattery>
							</view>
							<view class="tn-flex-basic-md tn-margin tn-margin-left-sm b-card text-black text-bold ">
								<view class="tn-flex tn-flex-direction-column ">
									<view class="tn-flex  tn-flex-row-center tn-flex-col-center"
										style="height: 105rpx;">
										<text class="tn-icon-light-fill text-lg padding-xs"> </text>
										<text class="padding-right text-bold text-xl" style="letter-spacing: 2px">
											充电</text>
										<switch class="radius checked" disabled :checked="true">
										</switch>
									</view>
									<view class="tn-flex  tn-flex-row-center tn-flex-col-center"
										style="height: 105rpx;">
										<text class="tn-icon-logout text-lg padding-xs"></text>
										<text class="padding-right text-bold text-xl" style="letter-spacing: 2px">
											放电</text>
										<switch class="radius checked" disabled :checked="true">
										</switch>
									</view>
								</view>
							</view>

						</view>
						<view class="margin-lr margin-bottom b-card">
							<view class="grid col-3 flex justify-center padding-tb">
								<view class="flex flex-direction align-center justify-center">
									<view class="text-blue2 text-bold text-xxl">
										72 V
									</view>
									<view>电池电压</view>
								</view>
								<view class="flex flex-direction align-center justify-center">
									<view class="text-blue2 text-bold text-xxl">
										0.0 A
									</view>
									<view>当前电流</view>
								</view>
								<view class="flex flex-direction align-center justify-center">
									<view class="text-blue2  text-bold text-xxl">
										0.0 W
									</view>
									<view>运行功率</view>
								</view>
							</view>
							<!-- <view class="grid col-2 flex justify-center padding-tb">
								
								<view class="flex flex-direction align-center justify-center">
									<view class="text-blue2  text-bold text-xxl">
										{{VCellInfo.vMax?(VCellInfo.vMax - VCellInfo.vMin): 0}} mV
									</view>
									<view>最大压差</view>
								</view>
								<view class="flex flex-direction align-center justify-center">

								</view>
							</view> -->
						</view>
					</view>
				</view>


				<view class="margin-sm radius-25" style="margin-top: 0;box-shadow: 2rpx 2rpx 4rpx 4rpx #def4f9;">
					<tn-collapse arrowColor='#0081ff'>
						<tn-collapse-item ref='collapse_1' icon='tn-icon-temperature-c' title="温度"
							subTitle='temperature'>
							<view class="cu-card tn-flex tn-flex-basic-sm tn-flex-direction-row">
								<view class="tn-flex justify-center align-center">
									<image src="/static/img/ble/wd.png" style="width: 128px;max-height: 128px;"
										mode="" />
								</view>
								<view class="tn-flex tn-flex-basic-lg tn-flex-direction-column">
									<view
										class="tn-flex margin-lr-sm padding-tb  shadow solid-bottom  justify-around tn-flex-direction-row">
										<view>
											<text class="text-bold">MOS</text>
											<text class="padding-left-xs text-bold text-blue2">
												33 ℃
											</text>
										</view>
										<view>
											<text class="text-bold">湿度</text>
											<text class="padding-left-xs text-bold text-blue2">
												6 %
											</text>
										</view>
									</view>
									<view class="grid col-2">
										<view style="display: flex; justify-content: center;"
											v-for="(item ,index) in PackInfo.TempNum.tValue?PackInfo.TempNum.tValue:0"
											:key="index">
											<view class="margin-tb-sm">
												<view
													style="display: flex; justify-content: space-around;align-items: center;flex-direction: column;width: 100%;height: 100%;padding: 5px;">
													<view class="text-bold text-blue2">
														{{PackInfo.Temp.tValue[item]}} ℃
													</view>
													<view class="text-sm">温度 {{item+1}}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</tn-collapse-item>
					</tn-collapse>
				</view>



				<view class="margin-sm radius-25" style="box-shadow: 2rpx 2rpx 4rpx 4rpx #def4f9;">
					<tn-collapse arrowColor='#0081ff'>
						<tn-collapse-item ref='collapse_2' icon="tn-icon-down-circle-simple" title="电压"
							subTitle='Voltage'>
							<view class="margin-sm grid col-2" style="min-height: 40px;">
								<template v-for="(item , index) in CellNum">
									<view :key="index" class="margin-tb-xs"
										style="display: flex; justify-content: space-around;">
										<view class="cu-capsule radius text-lg">
											<view class='cu-tag '
												:class="(VCellInfo.vMax===item)?'bg-orange':(VCellInfo.vMin===item?'bg-green':'bg-blue')"
												style="width: 65px;">
												电芯{{(index+1)}}
											</view>
											<view class="cu-tag line-blue">
												{{item}} mV
											</view>
										</view>
									</view>

								</template>

							</view>
						</tn-collapse-item>
					</tn-collapse>
				</view>


				<view class="cu-list menu margin-sm bg-white radius-25"
					style="box-shadow: 2rpx 2rpx 4rpx 4rpx #def4f9;">
					<view class="cu-item padding-lr-sm" style="background: none;padding: 10px 10px 10px 20px;">
						<view class="content text-blue2">
							<view class="text-xl text-bold" style="letter-spacing: 1px;">应急充电</view>
							<view class="text-df text-black tn-padding-right-xs">此按钮为充电应急启动，启动过程中不要退出小程序。
							</view>
						</view>
						<view class="action">
							<button class="cu-btn  cuIcon bg-blue shadow" @click="showConfirm">
								<text class="tn-icon-power  tn-text-lg-xxl" style=""></text>
							</button>
						</view>
					</view>
				</view>

				<view style="height: 10vh;background: none;"></view>
			</view>
			<!-- 密码弹窗 -->
			<template v-if="showPassword">
				<tn-modal :value="showPassword" @click="e=>onDialogClick(e,'CHECK')" @cancel="onDialogClose" custom
					:button="buttons" padding='30rpx'>
					<view class="custom-modal-content">
						<tn-form :labelWidth="80" style="width: 100%;">
							<tn-form-item label="密码:" :borderBottom="false">
								<tn-input v-model="dialogInput" border></tn-input>
							</tn-form-item>
						</tn-form>
					</view>
				</tn-modal>
			</template>
		</view>





		<!-- 检测弹窗 -->
		<tn-landscape :show="showCheck" :mask="true">
			<view class="check margin-lg" style="width: 100px;height: 100px;">
				<view class="loader">
					<view class="circle loading1"></view>
					<view class="circle loading2"></view>
					<view class="circle loading3"></view>
					<view class="circle loading4"></view>
					<view class="circle loading5"></view>
					<view class="circle loading6"></view>
					<view class="circle loading7"></view>
					<view class="circle loading8"></view>
				</view>
			</view>
			<view
				style="width: 360px;margin-top: 10px; padding:10px;display: flex;flex-direction: column;align-items: center;">
				<view class="text-bold text-white padding-tb text-xxl">{{currentStep.text}}</view>
				<tn-line-progress style="width: 260px;" :height="80" :percent="currentStep.progress"
					:striped="true"></tn-line-progress>
			</view>
		</tn-landscape>

		<!-- 发送指令弹窗 -->
		<tn-landscape :show="showTip" :mask="true">
			<view class="margin-lg tip" style="width: 100px;height: 100px;">
				<view class="load">
					<text></text>
					<text></text>
					<text></text>
					<text></text>
				</view>
			</view>
			<view style="width: 360px;padding:10px;display: flex;flex-direction: column;align-items: center;">
				<view class="padding bg-white" style="text-align: center;" v-if="isMQTT===false">
					<view class="text-bold text-red  text-xxl ">请重新插拔电池充电器</view>
					<view class="text-bold text-red  text-xxl ">不要关闭小程序</view>
				</view>
				<view class="padding bg-white" style="text-align: center;" v-else>
					<view class="text-bold text-red  text-xxl ">远程参数指令下发中</view>
					<view class="text-bold text-red  text-xxl ">不要关闭小程序</view>
				</view>
			</view>
		</tn-landscape>
	</view>

</template>

<script>
	import BLE from "@/libs/bluetooth/BLE.js";
	import bleData from "@/libs/protocol/jiabaida/bleData.js";
	import zuBattery from '../components/zu-battery/zu-battery'
	import car from '@/pages_ble/static/car.png'
	import san from '@/pages_ble/static/san.png'
	import san2 from '@/pages_ble/static/san2.png'
	import one from '@/pages_ble/static/2.jpg'
	import store from '@/store/index.js'

	const JiaBaiDaKey = 'JiaBD.UV'

	let _self;

	let timer = null
	let sendTimer = null
	let changingTimer = null
	export default {
		components: {
			zuBattery
		},
		data() {
			return {
				bleName: null,
				bleStatus: false,
				isConnecting: false,
				isMQTT: false,
				showCheck: true, //是否检查 低压
				isChecked: false, //是否检查 低压
				showTip: false, //更改参数提示
				dialogInput: '',
				resData: '',
				PowerW: 0,
				currentStepIndex: 0,
				currentStep: {},
				UVObj: {},
				deviceInfo: {},
				userLevels: {},
				jiabaida: {},
				PackInfo: bleData.packInfo,
				CellNum: CellNum,
				VCellInfo: {
					vMax: 3320,
					vMin: 3120
				},
				carImgs: [one, car, san, san2],
				showPasswordCount: 0,
				reconnectTimer: null,
				isWrite: false,
				isSendCmd: false,
				sendEnable: false,
				showPassword: false,
				readIndex: 0,
				SOCValue: 0,
				imgNum: 0,
				buttons: [{
						text: '取消',
						backgroundColor: '#AAAAAA',
						fontColor: '#FFFFFF'
					},
					{
						text: '确定',
						backgroundColor: '#01BEFF',
						fontColor: '#FFFFFF'
					}
				]
			}
		},
		onLoad(options) {
			_self = this
			// 保持屏幕常亮
			uni.setKeepScreenOn({
				keepScreenOn: true
			});
			var that = this;
			that.updateProgress();

			// 获取用户等级密码信息
			this.$api.common.listUserLevel().then(res => {
				this.userLevels = {}
				if (res.code === 200) {
					for (var i = 0; i < res.data.length; i++) {
						let t = res.data[i]
						if (t.configKey.indexOf('level.') > -1) {
							this.userLevels['level.' + t.configKey.split('level.')[1]] = t.configValue
						}
					}
					console.log('this.userLevels', this.userLevels);
				}
			})
		},
		onShow() {
			let that = this
			let version = store.state.vuex_ble_version
			let num = uni.getStorageSync("IMG_V" + version)
			if (num) {
				this.imgNum = num
			}
		},
		methods: {
			setImg() {
				_self.imgNum += 1
				if (_self.imgNum > 3) {
					_self.imgNum = 0
				}
				let version = store.state.vuex_ble_version
				uni.setStorageSync("IMG_V" + version, _self.imgNum)
			},
			showConfirm() {
				BLE.confirm('此按钮为充电应急启动，请确认插好充电器', () => {
					
				})
			},
			/**
			 * 连续点击标题或者 电池容量
			 * @param {Object} flag
			 */
			showPasswordFun(flag) {
				this.isSendCmd = true
				let count = this.showPasswordCount++
				if (count > 2 && flag === 'NAME') {
					//弹窗修改蓝牙名称
					this.showPassword = true
					this.dialogType = 'NAME'
				}
				if (count > 4 && flag === 'CONFIG') {
					//弹窗修改参数
					this.showPassword = true
					this.dialogType = 'CONFIG'
				}
			},
			/**
			 *
			 */
			onDialogClose() {
				this.showDialog = false;
				this.isSendCmd = false
				this.dialogInput = null
			},
			onDialogClick(e, type) {
				let that = this
				let input = that.dialogInput
				if (e.index < 1) {
					that.showPassword = false;
					that.showDialog = false;
					that.dialogInput = ''
					return
				}
				if (type === 'CHECK') {
					that.showPassword = false
					// 判断密码
					if (that.dialogType === 'NAME' && input === that.userLevels['level.1']) {
						that.showDialog = true
						that.dialogInput = ''
						return
					}
					if (that.dialogType === 'CONFIG' && input === that.userLevels['level.2']) {
						that.dialogInput = ''
						uni.navigateTo({
							url: '/pages_ble/ble/jiabaida/config?n=' + this.bleName
						})
					}
					that.showDialog = false

				}
			},
			updateProgress() {
				if (this.currentStepIndex < steps.length) {
					this.currentStep = steps[this.currentStepIndex]
					this.currentStepIndex++;
					// 模拟异步操作，每1秒更新一次进度
					setTimeout(this.updateProgress, 1000);
				} else {
					this.showCheck = false;
				}
			},
		}
	}

	const CellNum = [
		'3320',
		'3220',
		'3120',
		'3320',
		'3321',
		'3222',
		'3223',
		'3220',
		'3224',
		'3220',
		'3220',
		'3120',
	]

	const steps = [{
			progress: 10,
			text: "正在扫描电池..."
		},
		{
			progress: 30,
			text: "检查电池电压..."
		},
		{
			progress: 50,
			text: "检查电池电流..."
		},
		{
			progress: 80,
			text: "评估电池健康状态..."
		},
		{
			progress: 100,
			text: "电池检测完成"
		}
	];
</script>

<style lang="scss" scoped>
	.bg-white {
		background-color: rgb(255 255 255 / 60%);
	}


	.warp {
		color: #404e75;
		min-height: 100vh;
		background-size: cover;
		background-attachment: fixed;
	}

	.container {
		overflow: auto;
		height: 100vh;
		width: 100%;
		position: absolute;
		background-color: rgb(255 255 255 / 0%);
		top: 0%;
		left: 0%;
	}

	.b-card {
		background-color: #FFFFFF;
		border-radius: 18rpx;
		box-shadow: 2rpx 2rpx 4rpx 4rpx #def4f9;
	}
</style>


<style lang="scss" scoped>
	.radius-25 {
		border-radius: 15rpx;
	}

	.PhotographerBoxL {
		width: 35%;
		text-align: center;
		float: left;
	}

	.bg-img-dc-max {
		background-image: url('/static/img/ble/dx-max.png');
		background-size: 100% 100%;
		color: #13227a;
		height: 90rpx;
		width: 86px;
	}

	.bg-img-dc-min {
		background-image: url('/static/img/ble/dx-min.png');
		background-size: 100% 100%;
		height: 90rpx;
		color: #0b988f;
		width: 86px;
	}

	.bg-img-dc {
		background-image: url('/static/img/ble/dx.png');
		background-size: 100% 100%;
		height: 90rpx;
		width: 86px;
		color: #1296db;
	}

	.check {

		/* 加载动画*/
		.loader {
			position: absolute;
			width: 120rpx;
			height: 120rpx;
			top: 25%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.circle {
			color: #01BEFF;
			position: absolute;
			border-radius: 100%;
			width: 30rpx;
			height: 30rpx;
			display: inline-block;
			float: none;
			background-color: currentColor;
			border: 0 solid currentColor;
			-webkit-animation: spin 1s infinite ease-in-out;
			-moz-animation: spin 1s infinite ease-in-out;
			-o-animation: spin 1s infinite ease-in-out;
			animation: spin 1s infinite ease-in-out
		}

		.loader :nth-child(1) {
			top: 5%;
			left: 50%;
			-webkit-animation-delay: -.875s;
			-moz-animation-delay: -.875s;
			-o-animation-delay: -.875s;
			animation-delay: -.875s
		}

		.loader :nth-child(2) {
			top: 18.1801948466%;
			left: 81.8198051534%;
			-webkit-animation-delay: -.75s;
			-moz-animation-delay: -.75s;
			-o-animation-delay: -.75s;
			animation-delay: -.75s
		}

		.loader :nth-child(3) {
			top: 50%;
			left: 95%;
			-webkit-animation-delay: -.625s;
			-moz-animation-delay: -.625s;
			-o-animation-delay: -.625s;
			animation-delay: -.625s
		}

		.loader :nth-child(4) {
			top: 81.8198051534%;
			left: 81.8198051534%;
			-webkit-animation-delay: -.5s;
			-moz-animation-delay: -.5s;
			-o-animation-delay: -.5s;
			animation-delay: -.5s
		}

		.loader :nth-child(5) {
			top: 94.9999999966%;
			left: 50.0000000005%;
			-webkit-animation-delay: -.375s;
			-moz-animation-delay: -.375s;
			-o-animation-delay: -.375s;
			animation-delay: -.375s
		}

		.loader :nth-child(6) {
			top: 81.8198046966%;
			left: 18.1801949248%;
			-webkit-animation-delay: -.25s;
			-moz-animation-delay: -.25s;
			-o-animation-delay: -.25s;
			animation-delay: -.25s
		}

		.loader :nth-child(7) {
			top: 49.9999750815%;
			left: 5.0000051215%;
			-webkit-animation-delay: -.125s;
			-moz-animation-delay: -.125s;
			-o-animation-delay: -.125s;
			animation-delay: -.125s
		}

		.loader :nth-child(8) {
			top: 18.179464974%;
			left: 18.1803700518%;
			-webkit-animation-delay: 0s;
			-moz-animation-delay: 0s;
			-o-animation-delay: 0s;
			animation-delay: 0s
		}

		@-webkit-keyframes spin {

			0%,
			100% {
				opacity: 1;
				-webkit-transform: scale(1);
				transform: scale(1)
			}

			20% {
				opacity: 1
			}

			80% {
				opacity: 0;
				-webkit-transform: scale(0);
				transform: scale(0)
			}
		}

		@-moz-keyframes spin {

			0%,
			100% {
				opacity: 1;
				-moz-transform: scale(1);
				transform: scale(1)
			}

			20% {
				opacity: 1
			}

			80% {
				opacity: 0;
				-moz-transform: scale(0);
				transform: scale(0)
			}
		}

		@-o-keyframes spin {

			0%,
			100% {
				opacity: 1;
				-o-transform: scale(1);
				transform: scale(1)
			}

			20% {
				opacity: 1
			}

			80% {
				opacity: 0;
				-o-transform: scale(0);
				transform: scale(0)
			}
		}

		@keyframes spin {

			0%,
			100% {
				opacity: 1;
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-o-transform: scale(1);
				transform: scale(1)
			}

			20% {
				opacity: 1
			}

			80% {
				opacity: 0;
				-webkit-transform: scale(0);
				-moz-transform: scale(0);
				-o-transform: scale(0);
				transform: scale(0)
			}
		}

	}

	.tip {

		/* 加载 */
		.load {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 60px;
			height: 60px;
		}

		.load text {
			border: 0;
			margin: 0;
			width: 40%;
			height: 40%;
			position: absolute;
			border-radius: 50%;
			animation: spinTip 2s ease infinite
		}

		.load :first-child {
			background: #4B98FE;
			animation-delay: -1.5s
		}

		.load :nth-child(2) {
			background: #00D05E;
			animation-delay: -1s
		}

		.load :nth-child(3) {
			background: #FFAC00;
			animation-delay: -0.5s
		}

		.load :last-child {
			background: #FB6A67
		}


		@keyframes spinTip {

			0%,
			100% {
				transform: translate(0)
			}

			25% {
				transform: translate(160%)
			}

			50% {
				transform: translate(160%, 160%)
			}

			75% {
				transform: translate(0, 160%)
			}
		}
	}
</style>